<template>
    <div class="page">
        <div class="flex-row flex-item">
            <tz-filter ref="pageFilter" @change="filterChange" :filter-data="filterData">
                <template v-slot:default="scope">
                    <el-cascader
                           size="small"
                           clearable
                           class="table-filter-item"
                           v-model="scope.data.deviceTypes"
                           :options="deviceTypeList"
                           placeholder="请选择设备分类"
                           :props="{
                           value: 'key',
                           label: 'keyName'
                     }"></el-cascader>
                    <el-input :maxlength="50" size="small" class="table-filter-item" v-model.trim="scope.data.name" clearable placeholder="设备名称"></el-input>
                    <el-input :maxlength="50" size="small" class="table-filter-item" v-model.trim="scope.data.ip" clearable placeholder="ip地址"></el-input>
                </template>
            </tz-filter>
            <div class="flex1"></div>
            <el-button :type="isProtect ? 'primary' : ''" size="mini" @click="queryImprove">待维护数据</el-button>
        </div>
        <tz-table
                ref="tzTable"
                highlight-current-row
                size="mini"
                :data="loadData">
            <el-table-column
                    prop="name"
                    show-overflow-tooltip
                    width="400"
                    label="设备名称">
                <template slot-scope="scope">
                    <high-light :value="scope.row.name" :keyword="filterData.name"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="ip"
                    show-overflow-tooltip
                    label="ip地址">
                <template slot-scope="scope">
                    <high-light :value="scope.row.ip" :keyword="filterData.ip"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="code"
                    show-overflow-tooltip
                    label="code">
            </el-table-column>
            <el-table-column
                    prop="deviceTypeFullName"
                    show-overflow-tooltip
                    label="设备分类名称">
            </el-table-column>
            <el-table-column
                    prop="area"
                    show-overflow-tooltip
                    label="城市">

            </el-table-column>
            <el-table-column
                    prop="resourceGroupName"
                    show-overflow-tooltip
                    label="单位">
            </el-table-column>
            <el-table-column
                    prop="dataDate"
                    show-overflow-tooltip
                    label="入湖时间"
                    :formatter="(row) => {
                        return moment(row.dataDate).format('YYYY-MM-DD HH:mm:ss')
                    }">
            </el-table-column>
            <el-table-column
                    prop="operate"
                    show-overflow-tooltip
                    label="操作">
                <template slot-scope="scope">
                    <el-button v-if="$auth['operation_deviceList_edit']" @click="editItem(scope.row)" size="small" type="text">编辑</el-button>
                </template>
            </el-table-column>
        </tz-table>
        <el-drawer
                title="设备信息"
                :visible.sync="drawer"
                direction="rtl">
            <div class="drawer-content" v-loading="loading">
                <el-form :model="deviceInfo" ref="deviceForm" :rules="rules" label-width="80px">
                    <el-form-item label="名称" prop="name">
                        <el-input :maxlength="100" show-word-limit v-model="deviceInfo.name"></el-input>
                    </el-form-item>
                    <el-form-item label="ip地址" prop="ip">
                        <el-input :maxlength="100" show-word-limit v-model="deviceInfo.ip"></el-input>
                    </el-form-item>
                    <el-form-item label="城市" prop="area">
                        <el-input :maxlength="20" show-word-limit v-model="deviceInfo.area"></el-input>
                    </el-form-item>
                    <el-form-item label="单位" prop="resourceGroupName">
                        <el-select style="width: 100%" v-model="deviceInfo.resourceGroupName"
                                   placeholder="请选择单位">
                            <el-option v-for="item in allGroupsList"
                                       :key="item.groupId"
                                       :label="item.groupName"
                                       :value="item.groupName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <div class="flex-item flex-row">
                            <div class="flex1"></div>
                            <el-button size="small" @click="drawer = false">取消</el-button>
                            <el-button size="small" type="primary" @click="saveOrUpdateUser">保存</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import moment from 'moment'
import {mapState} from 'vuex'

export default {
  name: 'deviceAdmin',
  data() {
    return {
      moment,
      filterData: {
        deviceTypes: [],
        network: 'JZW',
        ip: '',
        name: ''
      },
      deviceInfo: {
        ip: '',
        phone: '',
        name: '',
        area: '',
        resourceGroupName: ''
      },
      loading: false,
      drawer: false,
      rules: {
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ],
        ip: [
          { required: true, message: '请输入ip地址', trigger: 'change' }
        ],
        area: [
          { required: true, message: '请输入城市名称', trigger: 'change' }
        ],
        resourceGroupName: [
          { required: true, message: '请选择所属单位', trigger: 'change' }
        ]
      },
      allGroupsList: [],
      isEq: 0,
      // 是否查询的待维护的数据
      isProtect: 0
    }
  },
  methods: {
    refresh() {
      this.$refs.tzTable.refresh(true)
    },
    filterChange(res) {
      this.isEq = res.isEq
      this.isProtect = 0
      this.refresh()
    },
    queryImprove() {
      this.isProtect = 1
      this.isEq = 0
      this.$refs.pageFilter.isEq = 0
      this.refresh()
    },
    loadData(page) {
      const { deviceTypes, network, name, ip } = this.filterData
      const params = {...page, network, name, ip, isEq: this.isEq}
      if (deviceTypes.length) {
        params.deviceType = deviceTypes[0]
        params.deviceTypeTwo = deviceTypes[1]
      }
      params.isProtect = this.isProtect
      return this.$http.get('/device/getDeviceList', {
        params
      }).then(res => {
        return {
          data: (res.records || []).map(item => {
            return {
              ...item,
              resourceGroupName: item.resourceGroupName === '[]' ? '' : item.resourceGroupName
            }
          }),
          total: res.total
        }
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取列表失败')
      })
    },
    editItem(item) {
      this.deviceInfo = {...item}
      this.drawer = true
    },
    saveOrUpdateUser() {
      this.$refs.deviceForm.validate((valid) => {
        if (!valid) {return}
        this.loading = true
        // this.$http.post('/device/updateDeviceInfo', this.deviceInfo).then(res => {
        this.$http.post('/device/updateDeviceInfo', this.deviceInfo).then(() => {
          this.refresh()
          this.drawer = false
        }).catch(err => {
          this.$TZmessage.error(err.msg || '编辑设备失败')
        }).finally(() => {
          this.loading = false
        })
      })
    },
    getGroups() {
      this.$http.get('/sys/user/getGroupList').then(res => {
        this.allGroupsList = res || []
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取用户组失败')
      })
    }
  },
  mounted() {
    this.getGroups()
  },
  computed: {
    ...mapState('dict', ['deviceTypeList', 'deviceTypeMap']),
  }
}
</script>

<style lang="scss" scoped>
    .drawer-content {
        padding: 20px;
    }
</style>